<template>
  <div class="container">
    <el-button type="text" @click="dialogVisible = true"
      >资费核实选择
    </el-button>
    <el-button type="text" @click="dialogVisible1 = true"
      >重新决算金额
    </el-button>
    <el-button type="text" @click="dialogVisible2 = true"
      >核实资费
    </el-button>
    <el-button type="text" @click="dialogVisible3 = true"
      >甲填报决算金额
    </el-button>
    <el-button type="text" @click="dialogVisible4 = true"
      >查看决算单列表
    </el-button>
    <el-button type="text" @click="dialogVisible5 = true"
      >填报A端业务月租费(资源填报)
    </el-button>
    <el-button type="text" @click="dialogVisible6 = true"
      >填报甲端境外方案(香港)
    </el-button>
    <el-button type="text" @click="dialogVisible7 = true"
      >预警填报
    </el-button>
     <el-button type="text" @click="dialogVisible8 = true"
      >填报A端业务月租费(销售品级别)
    </el-button>
     <el-button type="text" @click="dialogVisible9 = true"
      >工单信息(查看-项目信息)
    </el-button>
    <el-dialog
      title="甲端本地资费核实"
      :visible.sync="dialogVisible"
      width="85%"
      lock-scroll
    >
      <div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="130px">
          <fieldset class="contain-box">
            <legend class="contain-title">节点选择</legend>
            <div class="m-bd">
              <div style="margin: 15px 0">
                <el-checkbox
                  class="all-check"
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >请选择甲端节点
              </div>
              <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                  city
                }}</el-checkbox>
              </el-checkbox-group>

              <div style="margin: 15px 0">
                <el-checkbox
                  class="all-check"
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >请选择已端节点
              </div>
              <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                  city
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </fieldset>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="text-c">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </div>
      </span>
    </el-dialog>
    <choose-recalculate-amount :visible="dialogVisible1" @closeDialog ="closeDialog1"></choose-recalculate-amount>
    <verify-fees :visible="dialogVisible2" @closeDialog ="closeDialog2"></verify-fees>
    <a-recalculate-amount :visible="dialogVisible3" @closeDialog ="closeDialog3"></a-recalculate-amount>
    <final-statement-list :visible="dialogVisible4" @closeDialog ="closeDialog4"></final-statement-list>
    <a-business-rent :visible="dialogVisible5" @closeDialog ="closeDialog5"></a-business-rent>
    <a-overseas-scheme :visible="dialogVisible6" @closeDialog ="closeDialog6"></a-overseas-scheme>
    <warning-report :visible="dialogVisible7" @closeDialog="closeDialog7"></warning-report>
    <sales-goods-amonth-renta-fee :visible="dialogVisible8" @closeDialog="closeDialog8"></sales-goods-amonth-renta-fee>
    <project-infor :visible="dialogVisible9" @closeDialog="closeDialog9"></project-infor>
  </div>
</template>
<script>
import chooseRecalculateAmount from "@/views/order/dialog/chooseRecalculateAmount"
import verifyFees from "@/views/order/dialog/verifyFees"
import ARecalculateAmount from "@/views/order/dialog/ARecalculateAmount"
import finalStatementList from "@/views/order/dialog/finalStatementList"
import ABusinessRent from "@/views/order/dialog/ABusinessRent"
import AOverseasScheme from "@/views/order/dialog/AOverseasScheme"
import warningReport from "@/views/order/dialog/warningReport"
import salesGoodsAmonthRentaFee from "@/views/order/dialog/SalesGoodsAmonthRentaFee"
import ProjectInfor from "@/views/order/dialog/ProjectInfor"
const cityOptions = ["甲端本地网"];
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    chooseRecalculateAmount,
    verifyFees,
    ARecalculateAmount,
    finalStatementList,
    ABusinessRent,
    AOverseasScheme,
    warningReport,
    salesGoodsAmonthRentaFee,
    ProjectInfor
  },
  // 这里存放数据
  data() {
    return {
      ruleForm: {},
      checkAll: false,
      checkedCities: ["甲端本地网"],
      cities: cityOptions,
      isIndeterminate: true,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2:false,
      dialogVisible3:false,
      dialogVisible4:false,
      dialogVisible5:false,
      dialogVisible6:false,
      dialogVisible7:false,
      dialogVisible8:false,
      dialogVisible9:false
    };
  },
  // 生命周期 - 创建完成（可以访问当前thischeckAll实例）
  created() {},
  mounted() {},
  // 方法集合
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    closeDialog1(){
      this.dialogVisible1 = !this.dialogVisible1
    },
    closeDialog2(){
      this.dialogVisible2 = !this.dialogVisible2
    },
    closeDialog3(){
      this.dialogVisible3 = !this.dialogVisible3
    },
    closeDialog4(){
      this.dialogVisible4 = !this.dialogVisible4
    },
    closeDialog5(){
      this.dialogVisible5 = !this.dialogVisible5
    },
    closeDialog6(){
      this.dialogVisible6 = !this.dialogVisible6
    },
    closeDialog7(){
      this.dialogVisible7 = !this.dialogVisible7
    },
    closeDialog8(){
       this.dialogVisible8 = !this.dialogVisible8
    },
     closeDialog9(){
       this.dialogVisible9 = !this.dialogVisible9
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {},
  // 生命周期 - 数据挂载之前
  beforeMount() {},
  // 生命周期 - 数据更新之前
  beforeUpdate() {},
  // 生命周期 - 数据更新之后
  updated() {},
  // 生命周期 - 页面销毁之前
  beforeDestroy() {},
  // 生命周期 - 页面销毁完成
  destroyed() {},
};
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.container {
  padding: 0.1rem 0.2rem;
}
.contain-box {
  padding: 0 0.2rem;
  border: 1px solid #f56f3c;
}
.contain-title {
  margin-left: 0.4rem;
  padding: 0 0.1rem;
}
.all-check {
  margin-right: 0.2rem;
}
.contain-box {
  margin: 0 0 0.2rem;
}
.m-bd {
  margin-bottom: 0.2rem;
}
.text-c {
  text-align: center;
}
</style>